<template>
    <div ref="countdown" class="countdown-wrapper">{{ num }}</div>
</template>

<script setup lang="ts">
onMounted(() => {
    // 打开定时器
    timer = setInterval(() => {
        if (num.value <= 0) {
            // 关闭定时器
            clearInterval(timer);
            (countdown.value as HTMLElement).style.display = 'none';
        }
        num.value -= 1;
    }, props.ms);
});

onUnmounted(() => {
    // 关闭定时器
    clearInterval(timer);
});

// 定时器ref
const countdown = ref();
// 定时器开关
let timer: any = null;
// props属性
const props = defineProps({
    number: { type: Number, required: true },
    ms: { type: Number, required: true },
});
// 定时器数值
const num = ref(props.number);
</script>

<style scoped lang="scss">
.countdown-wrapper {
    font-family: 'Gill Sans', sans-serif;
    color: rgb(255, 174, 0);
    width: 100%;
}
</style>
